import React, { Component } from 'react';
import { connect } from 'dva';
import qs from 'qs';
import 'whatwg-fetch';
import Loading from '~/components/Loading';
import { Modal } from 'antd';
import classNames from 'classnames';
import memberSelf from '../assets/memberSelf.png';
import smile from '../assets/headImg.png';
import boder from '../assets/boder.png';
import message from '../assets/message.png';
import know from '../assets/know.png';
import style from './MemberSelf.less';

class MemberSelf extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: this.props.users.showKnow,
      codeImgUrl: '',
    }
  }
  componentWillMount = () => {
  }
  closeMask = () => {
    this.setState({
      show: false,
    })
  }
  render() {
    const { name, phone, role, shopName, shopNO, headImg, qrcodeurl } = this.props.users;
    return (
      <div className={style.box}>
        <img src={memberSelf} className={style.memberSelf} />
        <div className={style.massage}>
          <img src={headImg} className={style.headImg} />
          <p className={style.userInfo}>
            <span className={style.role}>{role}：</span>
            <span className={style.name}>{name}</span>
            <span className={style.phone}>（{phone}）</span>
          </p>
          <p className={style.shopInfo}>门店： {shopName}</p>
          <img src={boder} className={style.boder} />
          <img src={qrcodeurl} className={style.codeImg} />
        </div>
        <div className={classNames({ [style.maskSpin]: true, [style.showModal]: this.state.show })}>
           <div className={style.spin}>
             <img src={message} className={style.message}/>
             <img src={know} className={style.know} onClick={this.closeMask} />
           </div>
        </div>
      </div>
    )
  }
}
function mapStateToProps({ users }) {
  return { users };
};
export default connect(mapStateToProps)(MemberSelf);
